<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        html,body{width:100%;height:100%;}
        #cvs{

        }
    </style>
</head>
<body>
    <canvas id="cvs">Your browser does not support canvas!</canvas>
</body>
</html>
<script>
    var can=document.getElementById("cvs");
    var ctx=can.getContext("2d");
    can.width=window.innerWidth;
    can.height=window.innerHeight;
    var rad=0;
    setInterval(()=>{
        ctx.clearRect(0,0,can.width,can.height);
        ctx.save();
        ctx.beginPath();
        ctx.translate(can.width/2,can.height/2);
        ctx.rotate(rad);
        ctx.lineWidth=0.5;
        ctx.arc(0,0,200,0,2*Math.PI,false);
        ctx.stroke();
        ctx.beginPath();
        ctx.fillStyle="#000";
        ctx.arc(0,0,200,-Math.PI/2,Math.PI/2,false);
        ctx.fill();
        ctx.beginPath();
        ctx.fillStyle="#fff";
        ctx.arc(0,0,200,Math.PI/2,Math.PI/2*3,false);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(0,-100,100,0,2*Math.PI,false);
        ctx.fill();
        ctx.beginPath();
        ctx.fillStyle="#000";
        ctx.arc(0,100,100,0,2*Math.PI,false);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(0,-100,20,0,2*Math.PI,false);
        ctx.fill();
        ctx.beginPath();
        ctx.fillStyle="#fff";
        ctx.arc(0,100,20,0,2*Math.PI,false);
        ctx.fill();
        ctx.translate(-can.width/2,-can.height/2);
        ctx.restore();
        rad+=0.1;
    },50)
</script>